<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{cidadeBean.initializeForm(param.cidadeId)}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">#{cidadeBean.acao}</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Salvar" style="height:28px;" action="#{cidadeBean.save}" update="@this, messageFormCidade" icon="ui-icon-disk"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{cidadeBean.changeToList}" immediate="true" icon="ui-icon-arrowreturnthick-1-w" />
	</ui:define>
	
	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages globalOnly="false" id="messageFormCidade"/>
				<h:panelGrid columns="1" style="padding:5px;">
					<h:outputText value="Código" />
					<p:inputText style="width:100px;" disabled="true" value="#{cidadeBean.currentCidade.id}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="2" style="padding:5px;">
					<h:outputText value="Cidade *" />
					<h:outputText value="DDD" />
					
					<p:inputText style="width:300px;" value="#{cidadeBean.currentCidade.cidade}" required="true" requiredMessage="Informe a cidade." maxlength="30"/>
					<p:inputMask mask="9?99" style="width:100px;" value="#{cidadeBean.currentCidade.ddd}" maxlength="3" placeHolder=" "/>				
				</h:panelGrid>
				
				<h:panelGrid columns="3" style="padding:5px;" id="panelEstado">			
					<h:outputText value="Estado *" />		
					<h:outputText value="Sigla" />	
					<h:outputText value="" />	
					
					<p:autoComplete id="inputEstado" var="estado" value="#{cidadeBean.currentCidade.estado}" maxlength="30"
						itemLabel="#{estado.estado}" itemValue="#{estado}" size="50" required="true" requiredMessage="Selecione o estado"
						converter="estadoConverter" completeMethod="#{cidadeBean.getEstadoByQuery}">
						<p:ajax event="itemSelect" process="@this inputEstado" update="inputEstadoSigla inputEstadoPais inputEstadoPaisSigla inputEstadoPaisDdi"/>
					</p:autoComplete>
					
					<p:inputText style="width:100px;" disabled="true" value="#{cidadeBean.currentCidade.estado.sigla}" id="inputEstadoSigla"/>
					<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{cidadeBean.openDialogListEstado}" process="@this" title="Selecionar estado" />
				</h:panelGrid>

				<h:panelGrid columns="3" style="padding:5px;" id="panelPais">			
					<h:outputText value="País *"/>		
					<h:outputText value="Sigla" />	
					<h:outputText value="DDI" />	
					
					<p:inputText style="width:300px;" disabled="true" value="#{cidadeBean.currentCidade.estado.pais.pais}" id="inputEstadoPais"/>
					<p:inputText style="width:100px;" disabled="true" value="#{cidadeBean.currentCidade.estado.pais.sigla}" id="inputEstadoPaisSigla"/>
					<p:inputText style="width:100px;" disabled="true" value="#{cidadeBean.currentCidade.estado.pais.ddi}" id="inputEstadoPaisDdi"/>
				</h:panelGrid>
				
				<h:panelGrid columns="1" style="padding:5px;">
					<h:outputText value="* Campos obrigatórios" />
				</h:panelGrid>
			</div>
		</p:panel>		
	</ui:define>
	<ui:define name="popups">
		<ui:include src="listEstado.xhtml"/>
		<ui:include src="formEstado.xhtml"/>
		<ui:include src="listPais.xhtml"/>
		<ui:include src="formPais.xhtml"/>
	</ui:define>
</ui:composition>